<template>
  <main id="home" class="view" role="main">
    <div class="md-example-child md-example-child-picker md-example-child-picker-2">
      <div class="main">
        <img src="/static/1.png" />
        <div class="div_2">
          <div>
            <img src="/static/title.png">
            <span>套餐费用</span>
            <p>29元包60G通用+70G定向＋80分钟全国通话,套餐外及其他业务资费，国内语音拨打0.1元/分钟，短信0.1元/条,国内流量3元/G，赠送来显。</p>
            <span>优惠说明</span>
            <p>1、原套餐49元15G通用+40G定向流量+80分钟通话</p>
            <p>2、激活当月务必首充100元，送480元活动，每月到账20元，首月开始实付29元/月，24小时内叠加45G全国通用流量+30G广东省内定向流量有效期为2年，到期可联系客服续约。</p>
            <p style="margin-top: 20px;">首月资费说明：月租按天折算计费：29/30X天数，首月套餐给全量130G流量＋80分钟。</p>
            <span>温馨提示</span>
            <p>1、注意，当月务必充值，不充值没有优惠</p>
            <p>2、为保证赠送流量安全到账，建议选择在“中国联通APP〞等官方入口进行充值100元。</p>
            <p>3、定向专属流量：头条系、阿里系、腾讯系。</p>
            <p>4、套餐激活后赠送的流量当月有效，当月使用不完不结转。</p>
            <p>5、归属地：广东省内</p>
            <p>6、办理年龄：16-60周岁</p>
            <p style="height:20px;width:100px;"> </p>

            <img src="/static/coin.png">
          </div>
          <div>
            <div  style="width:40%;font-size: 18px;float:left;margin-top: 10px;padding: 0px;">
              <md-button class="primary"  @click="go_order" >选号</md-button>
            </div>
            <div  style="width:40%;font-size: 18px;float:left;margin-top: 10px;margin-left: 40px;  padding: 0px;">
              <md-button class="primary" @click="go_order_history" >查看订单</md-button>
            </div>
          </div>
        </div>

        <img src="/static/3.png" />
      </div>
    </div>
  </main>

</template>

<script>
import { Popup, Button, InputItem, Toast, ActivityIndicator, Dialog, DropMenu, PopupTitleBar, CheckBox, Picker, Field, FieldItem, Agree, NoticeBar, Icon } from 'mand-mobile'
import district from 'mand-mobile/components/picker/demo/data/district'
import axios from 'axios'

export default {
  name: 'guangdong-view',
  components: {
    [CheckBox.name]: CheckBox,
    [Popup.name]: Popup,
    [NoticeBar.name]: NoticeBar,
    [InputItem.name]: InputItem,
    [Button.name]: Button,
    [ActivityIndicator.name]: ActivityIndicator,
    [DropMenu.name]: DropMenu,
    [Picker.name]: Picker,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Agree.name]: Agree,
    [Icon.name]: Icon,
    [PopupTitleBar.name]: PopupTitleBar
  },
  data () {
    return {
      cert_name: '', // 姓名
      cert_no: '', // 身份证号码
      cert_num: '', // 自己电话，非购买的
      loading: false,
      isPickerShow1: false,
      isPickerShow2: false,
      pickerData1: district,
      pickerData2: [],
      pickerData3: [],
      pickerValue1: '',
      provinceList: [],
      agreeConf: {
        checked: false,
        name: 'agree0',
        size: 'md',
        disabled: false,
        introduction: '选中状态'
      },
      open: false,
      url: {
        list: '/agentgetcity',
        agentgetprotocol: '/agentgetprotocol',
        getMobilelist: '/agentselectnumber',
        agentgetcustinfo: '/agentgetcustinfo'
      },
      callback_url: ''
    }
  },
  methods: {
    go_order_history () {
      this.$router.push({
        path: '/order_history'
      })
    },
    go_order () {
      this.$router.push({
        path: '/content'
      })
    },
    onClick () {
      Dialog.alert({
        content: '点击了'
      })
    },
    createOrder () {
    },
    onPickerInitialed () {
      const columnValues = this.$refs.picker1.getColumnValues()
      let value = ''
      columnValues.forEach(item => {
        value += `${item.label}-`
      })
      console.log(`getColumnValues: ${value.substr(0, value.length - 1)}`)
    },
    handleClick () {
      Toast.info('点击按钮2')
    },
    // 回调
    saveOrder () {
    },
    getNetProtocol () {
    },
    validateIdCard (idCardNumber) {
    },
    download (waitTmp) {
    }
  },
  mounted () {
  }
}
</script>

<style>
*{ touch-action:  auto; }
.main{ width: 100%;height: auto;background: #CD3D47;padding-bottom: 30px; float: left;height: 100%; }
.main >img{width: 100%;height: auto; float: left; display: block;}
.div_2{float: left; background-size: contain; width: 100%; height:auto;}
.div_2 >div{ width: 92%;  margin:0 4%; float: left;  background:#fff; display: block; padding:20px 20px 10px 20px; height: auto;box-sizing:border-box;}
.div_2 >div img{ width: 100%; margin: 0 ; display:block; float: left; }

.div_2 >div span{
  background: #CD3D47; color: #fff; display: block;
  margin: 20px 35%;float:left;text-align: center;
  width: 30%; border-radius: 40px; font-size: 24px; padding: 5px 0; font-weight: bold;}
.div_2 >div p{color: #333; font-size: 30px;width: 100%; display: block; float: left;margin-bottom: 2px; }

</style>
